{% load static %}
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
	<title>iRedMailAdmin | Login</title>
		<link href="{% static 'css/login.css' %}" rel="stylesheet" />
		<link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet" />
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="cont">
	  <div class="demo">
	    <div class="login">
	      <div class="login__check">
	      	<img src="{% static 'images/logo.png' %}" alt="">
				</div>
				
	      <form action="" id="loginform" class="login__form">{% csrf_token %}
						<input type="hidden" name="next" value="{{next}}" />
	        <div class="login__row">
	          <svg class="login__icon name svg-icon" viewBox="0 0 20 20">
	            <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
	          </svg>
	          <input type="text" id="username" name="username" class="login__input name" placeholder="用户名"/>
	        </div>
	        <div class="login__row">
	          <svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
	            <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
	          </svg>
	          <input type="password" id="password" name="password" class="login__input pass" placeholder="密码"/>
	        </div>
	        <button class="login__submit">登 录</button>
	        <div id="loginalert" class="alert alert-danger" style="text-align:center" hidden></div>
	      </form>
	    </div>

	  </div>
	</div>

	<script src="{% static 'js/login.js' %}"></script>
	<script src="{% static 'jquery/jquery-2.2.4.js' %}"></script>
	<script>
	$(document).ready(function () {
		var $loginusername = $('#username');
		var $loginpassword = $('#password');

	    var animating = false, submitPhase1 = 1100, $login = $('.login');
	    function ripple(elem, e) {
	        $('.ripple').remove();
	        var elTop = elem.offset().top, elLeft = elem.offset().left, x = e.pageX - elLeft, y = e.pageY - elTop;
	        var $ripple = $('<div class=\'ripple\'></div>');
	        $ripple.css({
	            top: y,
	            left: x
	        });
	        elem.append($ripple);
	    };
	    $('.login__form').on('submit', function (e) {
	        if (animating)
	            return false;
	        animating = true;
	        var that = $(".login__submit");
	        ripple($(that), e);
	        $(that).addClass('processing');
	        setTimeout(function () {
	        	animating = false;
	
							login();
							that.removeClass('processing');
	        }, submitPhase1);
	        return false;
			});
			
			//登录函数
			function login() {

				if ($loginusername.val() == "" || $loginpassword.val() == "") {
					$("#loginalert").show().html("<strong>用户名或密码为空，请输入</strong>");
					$loginusername.focus();
				} else {
					//ajax异步提交  
					$.ajax({
						type: "POST",   //post提交方式默认是get
						url: "/login/",
						dataType: "json",
						data: $("#loginform").serialize(),   //序列化 
						error: function (request) {      // 设置表单提交出错                 
							$("#loginalert").show().html("网络异常，请稍后重试");  //登录错误提示信息
						},
						success: function (data) {
							if (data.code != 1) {
								$("#loginalert").show().html("<strong>" + data.msg + "</strong>");
							} else {
								document.location = data.url;
							}
						}
					});
				}
			}

			//按回车登录
			document.onkeydown = function (e) {
				var event = e || window.event;
				var code = event.keyCode || event.which || event.charCode;
				if (code == 13) {
					login();
				}
			}
	});
	</script>
</body>
</html>